<template>
    <!--<page-view :title="false">-->
    <div>
        <a-row :gutter="24">
            <a-col :xl="8" :lg="8" :md="8" :sm="8" :xs="8">
                <a-card :loading="loading" style="margin-bottom: 24px;" :bordered="false">
                    <div class="ant-card-head-title" style="padding: 0">页眉区</div> <a @click="showModal(1)" style="float: right">添加一列</a><hr style="background-color:#d9d9d9;border:none;height:1px;width: 100%">
                    <a-list>
                        <template v-for="(tag, index) in mod1">
                        <a-tag :key="index"
                                :closable="true"
                                :afterClose="() => t_one(index)" style="margin-top: 5px;">
                            {{tag.name}}
                        </a-tag>
                        </template>
                    </a-list>
                </a-card>
                <a-card :loading="loading" style="margin-bottom: 24px;" :bordered="false">
                    <div class="ant-card-head-title" style="padding: 0">表格区</div> <a @click="showModal(2)" style="float: right">添加一列</a><hr style="background-color:#d9d9d9;border:none;height:1px;width: 100%">
                    <a-list>
                        <template v-for="(tag, index) in mod2">
                            <a-tag :key="index"
                                   :closable="true"
                                   :afterClose="() => t_two(index)" style="margin-top: 5px;">
                                {{tag.name}}
                            </a-tag>
                        </template>
                    </a-list>
                </a-card>
                <a-card :loading="loading" style="margin-bottom: 24px;" :bordered="false">
                    <div class="ant-card-head-title" style="padding: 0">页脚区</div> <a @click="showModal(3)" style="float: right">添加一列</a><hr style="background-color:#d9d9d9;border:none;height:1px;width: 100%">
                    <a-list>
                        <template v-for="(tag, index) in mod3">
                            <a-tag :key="index"
                                   :closable="true"
                                   :afterClose="() => t_three(index)" style="margin-top: 5px;">
                                {{tag.name}}
                            </a-tag>
                        </template>
                    </a-list>
                </a-card>
            </a-col>
            <a-modal
                    :title="title"
                    v-model="visible"
                    @ok="handleOk"
                    :confirmLoading="confirmLoading"
                    @cancel="searchCancel"
            >
                <a-row>
                    <a-form :from="form">
                        <a-col span="24">
                            <a-form-item label="显示内容" :label-col="labelCol" :wrapper-col="wrapperCol">
                                <a-select placeholder="显示内容" @change="change_pt">
                                    <a-select-option value="">请选择显示内容</a-select-option>
                                    <a-select-option :value="item.id" :key="index" v-for="(item, index) in pt_l">{{item.name}}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col span="24">
                            <a-form-item label="显示标题" :label-col="labelCol" :wrapper-col="wrapperCol" >
                                <a-input v-model="show_title"></a-input>
                            </a-form-item>
                        </a-col>
                    </a-form>
                </a-row>
            </a-modal>
            <a-col
                    style="padding: 0 12px"
                    :xl="16"
                    :lg="16"
                    :md="16"
                    :sm="16"
                    :xs="16">
                <a-card title="预览区" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
                    <div class="ptl">
                        <div class="ptl1">
                            <div class="aio">
                                <template v-for="(tag, index) in mod1">
                                    <div v-if="tag.pid == 1" style="margin:0 auto;font-size: 25px;">
                                        <span>{{tag.name}}</span>
                                    </div>
                                    <div class="ptl1_head" v-else-if="tag.pid == 2" style="margin-top:-30px;">
                                        <span><img class="wu_pic" src="/img/logo.417bbe7f.png" alt="物业"></span>
                                    </div>
                                    <div class="ptl1_head" v-else-if="tag.pid == 3" style="margin-top:-30px;float: right;">
                                        <span>{{tag.name}}【】</span>
                                    </div>
                                </template>
                            </div>
                            <div class="aio">
                                <template v-for="(tag, index) in mod1">
                                    <div v-if="tag.pid > 3 && (index+1)%3 === 0" class="ptl1_head alts" style="float: right;">
                                        <span>{{tag.name}}【】</span>
                                    </div>
                                    <div v-else-if="tag.pid > 3" class="ptl1_head alts">
                                        <span>{{tag.name}}【】</span>
                                    </div>
                                </template>
                            </div>
                        </div>
                        <div class="ptl2">
                            <a-table ref="table"
                                     :columns="columns"
                                     :dataSource="dataSource"
                                     bordered="bordered"
                                     :pagination="false"
                            ></a-table>
                        </div>
                        <div class="ptl3">
                            <div class="aio">
                            <template v-for="(tag, index) in mod3">
                                <div v-if="tag.pid > 3 && (index+1)%3 === 0" class="ptl1_head alts" style="float: right;">
                                    <span>{{tag.name}}【】</span>
                                </div>
                                <div v-else-if="tag.pid > 3" class="ptl1_head alts">
                                    <span>{{tag.name}}【】</span>
                                </div>
                            </template>
                            </div>
                        </div>
                    </div>
                </a-card>
            </a-col>
        </a-row>
    </div>
    <!--</page-view>-->
</template>
<script>
import { saveTollModel,selectTollModel,updateTollModel } from '@/api/cashier'
import { mapGetters } from 'vuex'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
    name: 'charge_toll_add_model_two',
    data() {
        return {
            token_f:this.$ls.get(ACCESS_TOKEN),
            add_form:[],
            show_title:'',
            show_size:'',
            show_width:'',
            show_float:'',
            title:'',
            all_pt:[],
            loading:false,
            visible:false,
            det:[],
            mod1:[],
            mod2:[],
            mod3:[],
            pt_t:[],
            pt_b:[],
            pt_f:[],
            pt_l:[],
            data: [],
            name:'',
            type:0,
            paper_type:0,
            layout:0,
            num:0,
            range_t:0,
            range_r:0,
            range_b:0,
            range_l:0,
            width:0,
            pt_id:0,
            remark:'',
            edit_id:0,
            confirmLoading:false,
            dataSource:[{'name':''}],
            columns:[{title: ''}],
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
            form: this.$form.createForm(this),
        }
    },
    mounted() {
        this.get_pt();
        this.get_edit();
        // if(this.$route.params.edit_id) {
        //     this.edit_id = this.$route.params.edit_id;
        //     this.axios({
        //         method:'post',
        //         url:'/cashier/model_show',
        //         data:{token:this.token_f,edit_id:this.edit_id},
        //     }).then(res => {
        //         if(res.code === 0){
        //             this.det = res.data;
        //             this.mod1 = res.data.mod_h;
        //             this.mod2 = res.data.mod_b;
        //             this.mod3 = res.data.mod_f;
        //             this.columns = res.data.mod_x;
        //             this.pt_t = res.data.pt_t;
        //             this.pt_b = res.data.pt_b;
        //             this.pt_f = res.data.pt_f;
        //         }else this.$message.warning(res.msg,2);
        //     }).catch(err => {
        //         this.$message.error('服务器发生错误...',2);
        //     })
        // } else {
        //     this.edit_id = 0;
        // }
    },
    methods: {
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        get_edit(){
            if(this.$route.params.edit_id) {
                this.edit_id = this.$route.params.edit_id;
                this.axios({
                    method:'post',
                    url:'/cashier/model_show',
                    data:{token:this.token_f,edit_id:this.edit_id},
                }).then(res => {
                    if(res.code === 0){
                        this.det = res.data;
                        this.mod1 = res.data.mod_h;
                        this.mod2 = res.data.mod_b;
                        this.mod3 = res.data.mod_f;
                        this.columns = res.data.mod_x;
                        this.pt_t = res.data.pt_t;
                        this.pt_b = res.data.pt_b;
                        this.pt_f = res.data.pt_f;
                    }else this.$message.warning(res.msg,2);
                }).catch(err => {
                    this.$message.error('服务器发生错误...',2);
                })
            } else {
                this.edit_id = 0;
            }
        },
        change_pt(v){
            this.pt_id = v;
        },
        showModal(v) {
            if (v == 1) {
                this.title = '设置页眉';
                this.pt_l = this.pt_t;
            } else if (v == 2) {
                this.title = '设置表格';
                this.pt_l = this.pt_b;
            } else if (v == 3) {
                this.title = '设置页脚';
                this.pt_l = this.pt_f;
            }
            this.visible = true
        },
        handleOk() {
            this.axios({
                method:'get',
                url:'/cashier/set_mod_pt',
                params:{token:this.token(),pt_id:this.pt_id,mid:this.edit_id,title:this.show_title}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    this.pt_id = 0;
                    this.show_title = '';
                    this.get_edit();
                    this.visible = false;
                    this.$message.success('修改成功');
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        searchCancel(){
            this.visible = false;
        },
        t_one(e){
            this.re_mod(this.mod1[e].id);
            this.mod1.splice(e, 1);
        },
        t_two(e){
            this.re_mod(this.mod1[e].id);
            this.mod2.splice(e, 1);
        },
        t_three(e){
            this.re_mod(this.mod1[e].id);
            this.mod3.splice(e, 1);
        },
        re_mod(e) {
            this.axios({
                method:'get',
                url:'/cashier/rm_mod_pt',
                params:{token:this.token(),id:e,mid:this.edit_id}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    this.$message.success(msg);
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        get_pt(){
            this.axios({
                method:'get',
                url:'/cashier/set_all_pt',
                params:{token:this.token()}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    this.all_pt = data;
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        onSearch (value) {
        },
        onChangeNum(value) {
            this.num = value;
        },
        save(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(this.$route.params.id) {
                        values.id = this.$route.params.id;
                        updateTollModel(Object.assign(values,{token:this.token()})).then(res => {
                            if(res.code == 0) {
                                this.$notification.success({
                                    message: '成功',
                                    description: res.msg
                                })
                                setTimeout(() => {
                                    this.$router.push({name: 'charge_toll_index'})
                                }, 1000)
                            } else {
                                this.$notification['error']({
                                    message: '错误',
                                    description: res.msg,
                                    duration: 4
                                })
                            }

                        }).catch(err => {
                            this.$notification['error']({
                                message: '错误',
                                description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                                duration: 4
                            })
                        })
                    } else {
                        saveTollModel(Object.assign(values,{token:this.token()})).then(res => {
                            if(res.code == 0) {
                                this.$notification.success({
                                    message: '成功',
                                    description: res.msg
                                })
                                setTimeout(() => {
                                    this.$router.push({name: 'charge_toll_index'})
                                }, 1000)
                            } else {
                                this.$notification['error']({
                                    message: '错误',
                                    description: res.msg,
                                    duration: 4
                                })
                            }

                        }).catch(err => {
                            this.$notification['error']({
                                message: '错误',
                                description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                                duration: 4
                            })
                        })
                    }
                }
            })
        },
        back() {
            this.$router.go(-1)
        }
    }
}
</script>
<style scoped>
    .ptl{
        width: 725px;
        min-height: 300px;
        border: 1px dashed #d9d9d9;
        background-image: url(…6AHRRIAAAAAnRSTlMAsyT7Lw4AAAANSURBVAjXY2hgoCoAACfQAIGM5uSyAAAAAElFTkSuQmCC);
        background-size: 10px 10px;
        pointer-events: none;
        box-sizing: border-box;
        display: block;
        color: rgba(0,0,0,.65);
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5;
        list-style: none;
        -webkit-font-feature-settings: "tnum";
        font-feature-settings: "tnum";
    }
    .ptl1{
        display: inline-block;
        width: 90%;
        margin-left: 5%;
        margin-top:10px;
        text-align:center;
        height: 20%;
        min-height: 60px;
        pointer-events: none;
        color: rgba(0,0,0,.65);
        font-size: 14px;
        position: relative;
    }
    .ptl1_head{
        display: block;
        float: left;
        width: 30%;
    }
    .ptl2{
        display: block;
        pointer-events: none;
        border: 1px #CCCCCC dotted;
        width: 90%;
        height: 50%;
        margin-left: 5%;
        margin-top:10px;
        min-height: 120px;
        color: rgba(0,0,0,.65);
        font-size: 14px;
        position: relative;
    }
    .ptl3{
        display: inline-block;
        pointer-events: none;
        width: 90%;
        margin-left: 5%;
        margin-top:10px;
        text-align:center;
        height: 30%;
        min-height: 60px;
        color: rgba(0,0,0,.65);
        font-size: 14px;
        position: relative;
    }
    .wu_pic{
        width: 20%;
        height: auto;
    }
    .alts{
        float: left;
        margin-top: 20px;
    }
    .aio{
        display: inline-block;
        width: 100%;
    }
</style>